<template>
	<view class="content">
		<view class="info-view shadow fadeIn-1s">
			<view class="input-view">
				<view class="input-title">用户名：</view>
				<input class="input" placeholder="请输入用户名" v-model="user.username"></input>
			</view>
			
			<view class="input-view">
				<view class="input-title">性别：</view>
				<view class="input">
					<picker @change="onGenderChange" :value="genderIndex" :range="genderText">
						<view>{{genderText[genderIndex]}}</view>
					</picker>
				</view>
			</view>

			<view class="input-view">
				<view class="input-title">出生日期：</view>
				<view class="input" @tap="showBirthPicker = true">
					{{ user.birthDay == undefined || user.birthDay == "" ? "请选择生日" : user.birthDay }}
				</view>
				<u-datetime-picker :show="showBirthPicker" closeOnClickOverlay
					:minDate="0" :maxDate="Number(new Date())"
					v-model="birthValue" mode="date" @close="showBirthPicker = false"
					@cancel="showBirthPicker = false" @confirm="onBirthPickerConfirm"></u-datetime-picker>
			</view>
			
			<view class="input-view">
				<view class="input-title">学校：</view>
				<view class="input">
					<picker @change="onSchoolChange" :value="schoolIndex" :range="schoolText">
						<view>{{schoolText[schoolIndex]}}</view>
					</picker>
				</view>
			</view>
			
			<view class="input-view">
				<view class="input-title">邮箱：</view>
				<input class="input disabled" v-model="user.email" disabled="true"></input>
			</view>
			
			<view class="input-view">
				<view class="input-title">最后登录时间：</view>
				<input class="input disabled" v-model="user.lastLoginTime" disabled="true"></input>
			</view>
			
			<button class="button" @tap="onSubmitTap">保存</button>
		</view>
	</view>
</template>

<script>
	import {
		getMyInfo,
		updateUser
	} from "@/network/UserApi.js";
	import {
		getSchools
	} from "@/network/SchoolApi.js";
	export default {
		data() {
			return {
				user: [],

				// 性别 picker 选项
				genderText: ["男", "女"],
				genderIndex: 0,
				
				showBirthPicker: false,
				birthValue: null,
				
				schoolText: ["请选择学校"],
				schoolIndex: 0,
			}
		},

		onLoad() {
			this.refreshMyInfo();
		},

		methods: {
			/**
			 * 刷新用户数据
			 */
			refreshMyInfo: function() {
				getMyInfo().then(data => {
					this.user = data.content;
					this.refreshSchool();
					// 根据 user 的性别设置性别选择器的值
					if (this.user.gender == undefined || this.user.gender == "") {
						// 性别默认为男
						this.genderIndex = 0;
					} else if (this.user.gender == "女") {
						this.genderIndex = 1;
					} else {
						this.genderIndex = 0;
					}
					
					// 根据返回日期时间设置生日选择器的值
					let birthDay = this.user.birthDay;
					if (birthDay == undefined || birthDay == "") {
						this.birthValue = Number(new Date());
					} else {
						let year = birthDay.substring(0, 4);
						let month = birthDay.substring(5, 7);
						let day = birthDay.substring(8, 10);
						let date = new Date();
						date.setFullYear(year);
						date.setMonth(Number(month) - 1);
						date.setDate(day);
						this.birthValue = Number(date);
					}
				}).catch(err => {
					uni.showModal({
						title: "获取用户信息失败",
						content: err
					});
				});
			},
			
			/**
			 * 刷新学校数据
			 */
			refreshSchool: function() {
				getSchools().then(data => {
					this.schoolText = ["请选择学校"];
					for (let i = 0; i < data.content.length; i++) {
						this.schoolText.push(data.content[i].name);
					}
					
					if (this.user.schoolName != undefined && this.user.schoolName != "") {
						this.schoolIndex = this.schoolText.indexOf(this.user.schoolName);
					}
				}).catch(err => {
					uni.showModal({
						title: "获取学校失败",
						content: err
					});
				});
			},

			/**
			 * 性别选项更改事件
			 * @param {Object} e
			 */
			onGenderChange: function(e) {
				this.genderIndex = e.detail.value;
			},

			/**
			 * 选择出生日期确认事件
			 */
			onBirthPickerConfirm: function(e) {
				let date = new Date(e.value);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month < 10 ? "0" + month : month;
				day = day < 10 ? "0" + day : day;
				let birth = year + "-" + month + "-" + day;
				this.user.birthDay = birth;
				this.birthValue = e.value;
				this.showBirthPicker = false;
			},
			
			/**
			 * 学校选项更改事件
			 * @param {Object} e
			 */
			onSchoolChange: function(e) {
				this.schoolIndex = e.detail.value;
			},
			
			/**
			 * 保存按钮点击事件
			 */
			onSubmitTap: function() {
				let username = this.user.username;
				let gender = this.genderText[this.genderIndex];
				let birth = this.user.birthDay == undefined ? "" : this.user.birthDay;
				let school = this.schoolIndex == 0 ? "" : this.schoolText[this.schoolIndex];
				if (username.length == 0) {
					this.toast("用户名不能为空");
					return;
				}
				
				updateUser(username, gender, birth, school).then(data => {
					this.toast("保存成功");
				}).catch(err => {
					uni.showModal({
						title: "保存失败",
						content: err
					});
				});
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 20rpx;
	}

	.info-view {
		padding: 30rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		border-radius: 20px;
		background-color: white;
	}

	.input-view {
		margin-bottom: 20rpx;
	}

	.input-title {
		margin-left: 10rpx;
		margin-bottom: 5rpx;
		color: var(--contentColor);
		font-size: 26rpx;
	}

	.input {
		height: 70rpx;
		line-height: 70rpx;
		border: solid 1px $u-info-disabled;
		padding-left: 30rpx;
		padding-right: 30rpx;
		border-radius: 20px;
		transition: ease-out all .2s;
		color: var(--titleColor);
	}

	.input:hover {
		border: solid 1px $u-primary;
		box-shadow: 0px 0px 5px 3px $u-primary-light;
	}
	
	.button {
		margin-top: 40rpx;
	}
	
	.disabled {
		color: var(--secColor);
	}
	
	.disabled:hover {
		border: solid 1px $u-info-disabled;
		box-shadow: none;
	}
</style>
